<template>
  <div class="page pb-30">
    <!-- 钱包信息 -->
    <div class="container lh-2 ta-center" style="background-color: #1a1d29">
      <span>钱包地址：</span>
      <span class="click" @click="copyString(fromAddressRef)">
        {{ fromAddressHideRef }}
      </span>
    </div>

    <!-- 待释放算力 -->
    <div class="main ta-center pt-70">
      <div class="cl-main fz-30 fw-bold t-shadow mb-35">
        {{ details.totalPowerBalance }} T
      </div>
      <div class="cl-linear fz-22 fw-bold">待释放算力</div>
    </div>

    <!-- 订单详情 -->
    <div class="container">
      <div class="flex flex-center mt-20">
        <div class="title title--bg cl-linear">订单详情</div>
      </div>

      <ul class="data-list">
        <li class="box lh-2 mt-10">
          <div class="item" style="width: 100%">
            <span class="label cl-linear">股东份额</span>
            <span class="value cl-white">
              {{ details.totalShareholderShare || 0 }} PAX
            </span>
          </div>
          <div class="item" style="width: 100%">
            <span class="label cl-linear">剩余算力收益</span>
            <span class="value cl-white">
              {{ details.powerIncomeBalance || 0 }} PAX
            </span>
          </div>
          <div class="item" style="width: 100%">
            <span class="label cl-linear">剩余股东收益</span>
            <span class="value cl-white">
              {{ details.shareholderIncomeBalance || 0 }} PAX
            </span>
          </div>
        </li>
      </ul>
    </div>

    <!-- 收益提取 -->
    <div class="container">
      <div class="flex flex-center mt-20">
        <div class="title title--bg cl-linear">收益提取</div>
      </div>

      <div class="box ta-center">
        <div class="mb-15">
          <span class="cl-linear">提现消耗总算力：</span>
          <span class="cl-white">{{ details.totalConsumePower }}</span>
        </div>

        <div class="btn click" @click="showWithdrawDialog">提取</div>
      </div>
    </div>

    <!-- 认购收益订单 -->
    <div class="container">
      <div class="flex flex-center mt-20">
        <div class="title title--bg cl-linear">认购收益订单</div>
      </div>

      <div v-if="orders1.length">
        <ul class="data-list">
          <li class="box lh-2 mt-10" v-for="(v, i) in orders1" :key="i">
            <div class="item" style="width: 100%">
              <span class="label cl-linear">金额</span>
              <span class="value cl-white">{{ v.amount || 0 }} USDT</span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label cl-linear">算力数</span>
              <span class="value cl-white">{{ v.amount * 3 }} T</span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label cl-linear">时间</span>
              <span class="value cl-white">
                {{ v.updateTime }}
              </span>
            </div>
          </li>
        </ul>

        <!-- 分页 -->
        <van-pagination
          class="mt-10"
          mode="simple"
          :prev-text="$t('上一页')"
          :next-text="$t('下一页')"
          :total-items="total1"
          :items-per-page="size1"
          @change="getOrders1"
          v-model="page1"
        ></van-pagination>
      </div>

      <van-empty :description="$t('暂无数据')" v-else></van-empty>
    </div>

    <!-- 提现订单 -->
    <div class="container">
      <div class="flex flex-center mt-20">
        <div class="title title--bg cl-linear">提现订单</div>
      </div>

      <div v-if="orders2.length">
        <ul class="data-list">
          <li class="box lh-2 mt-10" v-for="(v, i) in orders2" :key="i">
            <div class="item" style="width: 100%">
              <span class="label cl-linear">金额</span>
              <span class="value cl-white">{{ v.amount }} PAX</span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label cl-linear">到账金额</span>
              <span class="value cl-white"
                >{{ v.actualWithdrawalAmount }} PAX</span
              >
            </div>
            <div class="item" style="width: 100%">
              <span class="label cl-linear">类型</span>
              <span class="value cl-white">
                {{ v.type == 0 ? '算力收益' : '股东收益' }}
              </span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label cl-linear">状态</span>
              <span class="value cl-white">
                {{
                  v.status == 0 ? '待提现' : v.status == 1 ? '已提现' : '超时'
                }}
              </span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label cl-linear">时间</span>
              <span class="value cl-white">
                {{ v.updateTime }}
              </span>
            </div>
          </li>
        </ul>

        <!-- 分页 -->
        <van-pagination
          class="mt-10"
          mode="simple"
          :prev-text="$t('上一页')"
          :next-text="$t('下一页')"
          :total-items="total1"
          :items-per-page="size1"
          @change="getOrders1"
          v-model="page1"
        ></van-pagination>
      </div>

      <van-empty :description="$t('暂无数据')" v-else></van-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from '@/store/index'
import { showToast, copyString } from 'js/utils'
import { showDialog } from 'vant'
import 'vant/es/dialog/style'

import md5 from 'js-md5'
import apis from 'js/apis'

const store = useStore()

const fromAddressRef = ref(fromAddress)
const fromAddressHideRef = ref(fromAddressHide)

// 订单详情
const details = ref({})

// 认购收益订单
const orders1 = ref([])
const page1 = ref(1)
const size1 = ref(5)
const total1 = ref(0)

// 提现订单
const orders2 = ref([])
const page2 = ref(1)
const size2 = ref(5)
const total2 = ref(0)

// 提现类型
const withdrawType = ref(0) // 0：算力收益 1：股东收益

// 提现金额
const withdrawAmount = computed(() => {
  return withdrawType.value === 0
    ? details.value?.powerIncomeBalance
    : details.value?.shareholderIncomeBalance
})

initPage()

// 初始化
async function initPage() {
  await login()
  getDetails()
  getOrders1()
  getOrders2()
}

// 登录
async function login() {
  const params = {
    walletAddress: md5(fromAddress) + fromAddress.slice(5, 14),
  }

  const { code, data } = await apis.miner.login(params)

  if (code === 200) {
    store.setMinerInfo(data.userinfo)
  }
}

// 提现
async function withdraw() {
  const params = {
    amount: withdrawAmount.value,
    type: withdrawType.value,
  }

  const { code } = await apis.miner.withdraw(params)

  if (code === 200) {
    showToast($t('操作成功'))
  }

  setTimeout(() => {
    getDetails()
    getOrders1()
    getOrders2()
  }, 10000)
}

// 获取订单详情
async function getDetails() {
  const { code, data } = await apis.miner.getDetails()

  if (code === 200) {
    details.value = data
  }
}

// 获取认购收益订单
async function getOrders1() {
  const params = {
    page: page1.value,
    limit: size1.value,
  }

  const { code, data } = await apis.miner.getOrders1(params)

  if (code === 200) {
    orders1.value = data.records || []
    total1.value = data.total || 0
  }
}

// 获取提现订单
async function getOrders2() {
  const params = {
    page: page2.value,
    limit: size2.value,
  }

  const { code, data } = await apis.miner.getOrders2(params)

  if (code === 200) {
    orders2.value = data.records || []
    total2.value = data.total || 0
  }
}

// 显示提现弹窗
function showWithdrawDialog() {
  showDialog({
    title: '请选择提现方式',
    confirmButtonText: '算力收益',
    cancelButtonText: '股东收益',
    showCancelButton: true,
  })
    .then(() => {
      withdrawType.value = 0
      getConsumePower()
    })
    .catch(() => {
      withdrawType.value = 1
      getConsumePower()
    })
}

// 获取提现消耗算力
async function getConsumePower() {
  const params = {
    amount: withdrawAmount.value,
  }

  const { code, data } = await apis.miner.getConsumePower(params)

  if (code === 200) {
    showDialog({
      title: `本次提现消耗算力：${data}`,
      message: '提现金额 x PandaX价格 = 提现消耗算力',
    }).then(() => {
      withdraw()
    })
  }
}
</script>

<style lang="scss" scoped>
$color1: #06ffff;

.page {
  background: url('@/assets/img/miner/bg.jpg') no-repeat left top / cover;
}

.main {
  height: 370px;
  background: url('@/assets/img/miner/main.jpg') no-repeat left top / 100%;
}

.cl-main {
  color: $color1;
}

.cl-linear {
  color: transparent;
  background-image: linear-gradient(to bottom, white, $color1);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: bolder;
}

.t-shadow {
  text-shadow: #07215a 0 4px 4px;
}

.box {
  padding: 20px 15px;
  background: url('@/assets/img/miner/box.png') no-repeat left top / 100% 100%;
}

.btn {
  display: inline-block;
  width: 100px;
  height: 40px;
  font-size: 16px;
  font-weight: bolder;
  line-height: 40px;
  background: url('@/assets/img/miner/btn.png') no-repeat left top / 100% 100%;
}

.title--bg {
  &::before {
    background: url('@/assets/img/miner/title_left.png') no-repeat left center /
      30px;
  }

  &::after {
    background: url('@/assets/img/miner/title_right.png') no-repeat right center /
      30px;
  }
}
</style>
